<template>
  <div class="container">
    <div class="header-box">
      <div class="now-type">
        <svg-icon icon-class="student-now" class="svg-icon" />
        <span>当前类型： {{ nowType }}</span>
      </div>
      <el-dropdown size="large">
        <span class="el-dropdown-link">
          更多处理类型
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="(item, index) in options" :key="index" @click="changeOption(item)">{{ item
            }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="main-content">
      <div v-if="tableData.length > 0">
        <el-table :data="tableData" stripe>
          <el-table-column prop="activityName" label="社团名称" show-overflow-tooltip>
            <template #default="scope">
              <div class="theme-success">
                <el-button type="primary" link>{{ scope.row.activityName }}</el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="activityForm" label="申请时间" show-overflow-tooltip>
            <template #default="scope">
              <div class="flex flex-center">
                <div class="student-button">{{ scope.row.activityForm == 0 ? '线上' : '线下' }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="activityType" label="申请类型">
            <template #default="scope">
              <div class="flex flex-center">
                <div class="student-button">{{ filterActivityType(scope.row.activityType) }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="activityStatus" label="申请进度">
            <template #default="scope">
              <div class="flex flex-center">
                <div class="student-button">{{ filterActivityStatus(scope.row.activityStatus) }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="处理状态">
            <template #default="scope">
              <div>
                <el-button type="primary" @click="dialogTableVisible = true">进度详情</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <Pagination></Pagination>
      </div>
      <NoData v-else />
      <el-dialog v-model="dialogTableVisible" title="审批进度">
        <div class="flex items-center mb-20">管理员：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="student-button">未处理</div> </div>
        <div class="flex items-center">超级管理员：<div class="student-button">未处理</div></div>
      </el-dialog>
    </div>
  </div>
</template>
<script lang="ts" setup>
import NoData from '@/components/noData/index.vue'
import { ref } from 'vue';
const tableData = [
  {
    activityName: "第一届歌手大赛", //  活动名称
    activityForm: 1, // 活动形式：0线下，1线上
    activityType: 1, // 活动类型：1社团活动，2院级活动，3校级活动
    enterStartTime: '2022-09-01', // 报名开始时间
    enterEndTime: '2022-09-02', //  报名截止时间
    formalStartTime: "2022-10-02", //  活动开始时间
    formalEndTime: '2022-11-01', //  活动截止时间
    issueSociety: '德云社', //发布机构
    score: 2.0, // 二课分
    activityStatus: 1 // 活动状态,0:报名未开始，1：报名中，2：报名已结束 3：活动未开始，4:活动进行中，5：活动已结束
  },
  {
    activityName: "第一届歌手大赛", //  活动名称
    activityForm: 0, // 活动形式：0线下，1线上
    activityType: 1, // 活动类型：1社团活动，2院级活动，3校级活动
    enterStartTime: '2022-09-01', // 报名开始时间
    enterEndTime: '2022-09-02', //  报名截止时间
    formalStartTime: "2022-10-02", //  活动开始时间
    formalEndTime: '2022-11-01', //  活动截止时间
    issueSociety: '德云社', //发布机构
    score: 2.0, // 二课分
    activityStatus: 3 // 活动状态,0:报名未开始，1：报名中，2：报名已结束 3：活动未开始，4:活动进行中，5：活动已结束
  },
  {
    activityName: "第一届歌手大赛", //  活动名称
    activityForm: 1, // 活动形式：0线下，1线上
    activityType: 1, // 活动类型：1社团活动，2院级活动，3校级活动
    enterStartTime: '2022-09-01', // 报名开始时间
    enterEndTime: '2022-09-02', //  报名截止时间
    formalStartTime: "2022-10-02", //  活动开始时间
    formalEndTime: '2022-11-01', //  活动截止时间
    issueSociety: '德云社', //发布机构
    score: 2.0, // 二课分
    activityStatus: 4 // 活动状态,0:报名未开始，1：报名中，2：报名已结束 3：活动未开始，4:活动进行中，5：活动已结束
  },
  {
    activityName: "第一届歌手大赛", //  活动名称
    activityForm: 1, // 活动形式：0线下，1线上
    activityType: 3,// 活动类型：1社团活动，2院级活动，3校级活动
    enterStartTime: '2022-09-01', // 报名开始时间
    enterEndTime: '2022-09-02', //  报名截止时间
    formalStartTime: "2022-10-02", //  活动开始时间
    formalEndTime: '2022-11-01', //  活动截止时间
    issueSociety: '德云社', //发布机构
    score: 2.0, // 二课分
    activityStatus: 5 // 活动状态,0:报名未开始，1：报名中，2：报名已结束 3：活动未开始，4:活动进行中，5：活动已结束
  },
  {
    activityName: "第一届歌手大赛", //  活动名称
    activityForm: 0, // 活动形式：0线下，1线上
    activityType: 3, // 活动类型：1社团活动，2院级活动，3校级活动
    enterStartTime: '2022-09-01', // 报名开始时间
    enterEndTime: '2022-09-02', //  报名截止时间
    formalStartTime: "2022-10-02", //  活动开始时间
    formalEndTime: '2022-11-01', //  活动截止时间
    issueSociety: '德云社', //发布机构
    score: 2.0, // 二课分
    activityStatus: 0 // 活动状态,0:报名未开始，1：报名中，2：报名已结束 3：活动未开始，4:活动进行中，5：活动已结束
  },
  {
    activityName: "第一届歌手大赛", //  活动名称
    activityForm: 0, // 活动形式：0线下，1线上
    activityType: 1, // 活动类型：1社团活动，2院级活动，3校级活动
    enterStartTime: '2022-09-01', // 报名开始时间
    enterEndTime: '2022-09-02', //  报名截止时间
    formalStartTime: "2022-10-02", //  活动开始时间
    formalEndTime: '2022-11-01', //  活动截止时间
    issueSociety: '德云社', //发布机构
    score: 2.0, // 二课分
    activityStatus: 5 // 活动状态,0:报名未开始，1：报名中，2：报名已结束 3：活动未开始，4:活动进行中，5：活动已结束
  },
  {
    activityName: "第一届歌手大赛", //  活动名称
    activityForm: 0, // 活动形式：0线下，1线上
    activityType: 2, // 活动类型：1社团活动，2院级活动，3校级活动
    enterStartTime: '2022-09-01', // 报名开始时间
    enterEndTime: '2022-09-02', //  报名截止时间
    formalStartTime: "2022-10-02", //  活动开始时间
    formalEndTime: '2022-11-01', //  活动截止时间
    issueSociety: '德云社', //发布机构
    score: 2.0, // 二课分
    activityStatus: 2 // 活动状态,0:报名未开始，1：报名中，2：报名已结束 3：活动未开始，4:活动进行中，5：活动已结束
  },
  {
    activityName: "第一届歌手大赛", //  活动名称
    activityForm: 0, // 活动形式：0线下，1线上
    activityType: 2, // 活动类型：1社团活动，2院级活动，3校级活动
    enterStartTime: '2022-09-01', // 报名开始时间
    enterEndTime: '2022-09-02', //  报名截止时间
    formalStartTime: "2022-10-02", //  活动开始时间
    formalEndTime: '2022-11-01', //  活动截止时间
    issueSociety: '德云社', //发布机构
    score: 2.0, // 二课分
    activityStatus: 4 // 活动状态,0:报名未开始，1：报名中，2：报名已结束 3：活动未开始，4:活动进行中，5：活动已结束
  },
  {
    activityName: "第一届歌手大赛", //  活动名称
    activityForm: 0, // 活动形式：0线下，1线上
    activityType: 1, // 活动类型：1社团活动，2院级活动，3校级活动
    enterStartTime: '2022-09-01', // 报名开始时间
    enterEndTime: '2022-09-02', //  报名截止时间
    formalStartTime: "2022-10-02", //  活动开始时间
    formalEndTime: '2022-11-01', //  活动截止时间
    issueSociety: '德云社', //发布机构
    score: 2.0, // 二课分
    activityStatus: 1 // 活动状态,0:报名未开始，1：报名中，2：报名已结束 3：活动未开始，4:活动进行中，5：活动已结束
  },
  {
    activityName: "第一届歌手大赛", //  活动名称
    activityForm: 0, // 活动形式：0线下，1线上
    activityType: 2, // 活动类型：1社团活动，2院级活动，3校级活动
    enterStartTime: '2022-09-01', // 报名开始时间
    enterEndTime: '2022-09-02', //  报名截止时间
    formalStartTime: "2022-10-02", //  活动开始时间
    formalEndTime: '2022-11-01', //  活动截止时间
    issueSociety: '德云社', //发布机构
    score: 2.0, // 二课分
    activityStatus: 0 // 活动状态,0:报名未开始，1：报名中，2：报名已结束 3：活动未开始，4:活动进行中，5：活动已结束
  },

];
// 过滤活动类型
const filterActivityType = (val: number) => {
  switch (val) {
    case 1:
      return '社团活动'
    case 2:
      return '院级活动'
    case 3:
      return '校级活动'
  }
}
// 过滤活动状态
const filterActivityStatus = (val: number) => {
  switch (val) {
    case 0:
      return '报名未开始'
    case 1:
      return '报名中'
    case 2:
      return '报名已结束'
    case 3:
      return '活动未开始'
    case 4:
      return '活动进行中'
    case 5:
      return '活动已结束'
  }
}
const nowType = ref('入/退社团处理')
// 审批类型数据
const options = [
  '入/退社团活动处理', '入/退团处理'
]
// 改变当前选择类型
const changeOption = (val: string) => {
  nowType.value = val
}
const dialogTableVisible = ref(false) // 弹框数据
</script>
<style lang="scss" scoped>
.container {
  display: grid;
  grid-template-rows: 5rem auto;

  .header-box {
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 1rem;

    .now-type {
      display: flex;
      align-items: center;
      margin-right: 10rem;
      font-size: 1.4rem;

      .svg-icon {
        width: 3rem;
        height: 3rem;
        margin-right: 0.5rem;
      }
    }

    .el-dropdown-link {
      cursor: pointer;
      color: var(--el-color-primary);
      display: flex;
      align-items: center;
      margin-right: 10rem;

      &:focus-visible {
        outline: none;
      }
    }
  }

  .student-button {
    border: 1px solid #DAECFE;
    color: #409EFF;
    background-color: #ECF5FF;
    // width: 5.5rem;
    padding: 0 0.8rem;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    border-radius: 0.5rem;
  }
}
</style>
